<h3>Settings</h3>

<form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
  <div class="form-group">
    <h4>Editor &amp; Output pane settings</h4>

    <div class="form-group">
      <label for="fontSize">Font Size</label>
      <div>
        <input
          input-focus
          ng-model="settings.vals.fontSize"
          name="fontSize"
          type="number"
          required
          class="form-control"
          >
      </div>
    </div>

    <div class="checkbox">
      <label for="wrapMode">
        <input type="checkbox" ng-model="settings.vals.wrapMode"/> Wrap long lines
      </label>
    </div>

  </div>

  <div class="form-group">
    <h4>Autocomplete</h4>

    <div class="checkbox">
      <label for="autocompleteFields">
        <input
          name="autocompleteFields"
          type="checkbox"
          ng-model="settings.vals.autocomplete.fields">
          Fields
        </input>
      </label>
    </div>

    <div class="checkbox">
      <label for="autocompleteIndices">
        <input
          name="autocompleteIndices"
          type="checkbox"
          ng-model="settings.vals.autocomplete.indices">
          Indices &amp; Aliases
        </input>
      </label>
    </div>

  </div>

  <div class="settings-footer">
    <button
      ng-click="close()"
      class="btn btn-default">
      Cancel
    </button>
    <button
      type="submit"
      ng-disabled="settingsForm.$invalid"
      class="btn btn-primary">
      Save
    </button>
  </div>
</form>
